{include file="public/header" /}
<style>
    .kllxs-hide {
        display: none;
    }
</style>
<blockquote class="layui-elem-quote">
    编辑
</blockquote>
<form class="layui-form layui-form-pane kllxs-form" id="kllxs-tpl-from" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">菜单等级</label>
        <div class="layui-input-block">
            <select name="pid" id="">
                <option value="0">顶级菜单</option>
                {foreach $parent_data as $k=>$v}
                <option value="{$v.id}" {$find.pid==$v.id?"selected":''}>{$v.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" autocomplete="off" placeholder="请输入菜单名称" class="layui-input"
                value="{$find.name}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-inline">
            <div id="iconSelect"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否菜单</label>
        <div class="layui-input-block">
            <input type="radio" name="is_menu" value="0" title="否" lay-filter="is_menu" {$find.is_menu=="0"
                ?'checked':''}>
            <input type="radio" name="is_menu" value="1" title="是" lay-filter="is_menu" {$find.is_menu=="1"
                ?'checked':''}>
        </div>
    </div>
    <div class="layui-form-item kllxs-hide">
        <label class="layui-form-label">标识</label>
        <div class="layui-input-group">
            <select name="controller" lay-filter="controller">
                <option value="">请选择父级组</option>
            </select>
            <select name="method" lay-filter="method">
                <option value="">选择子页面</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态(单选)</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="normal" title="正常" {$find.status=="normal" ?'checked':''}>
            <input type="radio" name="status" value="hidden" title="隐藏" {$find.status=="hidden" ?'checked':''}>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权重</label>
        <div class="layui-input-block">
            <input type="number" name="weigh" autocomplete="off" placeholder="请输入权重" class="layui-input"
                value="{$find.weigh}">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入备注" name="remark" class="layui-textarea">{$find.remark}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="kllxs-submit">确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{include file="public/footer" /}
<script>
    layui.use(["xmSelect", "jquery", "form", "popup"], function () {
        var xmSelect = layui.xmSelect
        var $ = layui.$
        var form = layui.form
        var popup = layui.popup

        //是否菜单
        var is_menuVal = $('input[name="is_menu"]:checked').val()
        if (is_menuVal == 1) {
            $(".kllxs-hide").show();
        }
        form.on('radio(is_menu)', function (res) {
            if (res.value == 1) {
                $(".kllxs-hide").show();
            } else {
                $(".kllxs-hide").hide();
            }
        })

        //联动选择
        var biaoShi = JSON.parse(`{$appAttribute|raw}`)
        $.each(biaoShi, function (k, v) {
            $('select[name="controller"]').append(
                `<option value="${v.name}" data-key="${k}">${v.title}</option>`
            );
        })
        form.render('select')
        form.on('select(controller)', function (res) {
            var key = $(res.elem).find(`option[value="${res.value}"]`).attr("data-key");
            $('select[name="method"]').html('')
            if (key >= 0) {
                $.each(biaoShi[key].child, function (k, v) {
                    $('select[name="method"]').append(
                        `<option value="${v.name}" data-key="${k}">${v.title}</option>`
                    );
                })
            } else {
                $('select[name="method"]').html(`<option value="">选择子页面</option>`)
            }
            form.render('select')
        })

        //图标
        var xm = xmSelect.render({
            el: '#iconSelect',
            tips: '请选择菜单图标',
            paging: true,
            radio: true,
            name: "icon_str",
            initValue: ["{$find.icon_str}"],
            filterable: true,
            data: [],
            model: {
                label: {
                    block: {
                        template: function (item, sels) {
                            return `<i class="${item.value}"></i>&emsp;${item.name}`
                        },
                    },
                }
            },
            template({ item, sels, name, value }) {
                return `<i class="${value}"></i>&emsp;${item.name}`
            },
        })
        // 动态数据
        $.get('/admin/icon.json', function (res) {
            if (typeof res === "string") {
                res = JSON.parse(res);
            }
            xm.update({
                data: res
            })
        })

        form.on('submit(kllxs-submit)', function (data) {
            var field = data.field; // 获取表单全部字段值

            popup.formSubmit("", field, top.window.layui.admin.getLeftMenu())

            return false; // 阻止默认 form 跳转
        })

    })
</script>